<template>
	<view class="main-box_G">
		<TabsSwitch :tabsList="tabsList"
			:tabsDataLength="[examiningData.length, usingData.length, completeData.length]"
			@tabsClick="tabsClick" />
		<view v-show="tabsIndex === 0">
			<DeviceCell v-for="item in examiningData" :key="item.id"
				:title="item.title" :time="item.time" imgRadius="4"
				image="https://cdn.uviewui.com/uview/album/1.jpg" btnText="办理"
				 btnColor="#FFA245" @click="gotoDetail">
				<view class="data-info_G">
					<view class="bookingData">
						<view>
							<text class="title">名称：</text>
							<text class="content">{{ item.name }}</text>
						</view>
						<view>
							<text class="title">类型：</text>
							<text class="content">{{ item.type }}</text>
						</view>
						<view>
							<text class="title">状态：</text>
							<text class="content"
								:class="item.typeText === 'primary' ? 'status_primary' : 'status_danger'">{{ item.status }}</text>
						</view>
					</view>
				</view>
			</DeviceCell>
		</view>
		<view v-show="tabsIndex === 1">
			<DeviceCell v-for="item in usingData" :key="item.id"
				:title="item.title" :time="item.time"
				 btnShape="circle" imgRadius="4"
				image="https://cdn.uviewui.com/uview/album/1.jpg" btnText="详情"
				btnType="info" @click="gotoDetail">
				<view class="data-info_G">
					<view class="bookingData">
						<view>
							<text class="title">名称：</text>
							<text class="content">{{ item.name }}</text>
						</view>
						<view>
							<text class="title">类型：</text>
							<text class="content">{{ item.type }}</text>
						</view>
						<view>
							<text class="title">状态：</text>
							<text class="content"
								:class="item.typeText === 'primary' ? 'status_primary' : 'status_danger'">{{ item.status }}</text>
						</view>
					</view>
				</view>
			</DeviceCell>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MyLabBooking',
		data() {
			return {
				tabsList: [{
						name: '待办'
					},
					{
						name: '已办'
					}
				],
				tabsIndex: 0,
				examiningData: [{
						id: 1,
						title: '张丽丽',
						time: '2022-04-02 14:07',
						name: '科研实验室2',
						type: '实验室预约',
						status: '申请',
						typeText: 'primary'
					},
					{
						id: 2,
						title: '宋军',
						time: ['2022-04-01 10:28'],
						name: '暗访机4号',
						type: '设备预约',
						status: '作废',
						typeText: 'danger'
					},
					{
						id: 3,
						title: '韩离',
						time: ['2022-03-02 14:20'],
						name: '科研实验室3',
						type: '实验室预约',
						status: '作废',
						typeText: 'danger'
					},
					{
						id: 4,
						title: '王小飞',
						time: ['2022-03-02 12:05'],
						name: '科研实验室4',
						type: '实验室预约',
						status: '申请',
						typeText: 'primary'
					}
				],
				usingData: [{
						id: 1,
						title: '黄友军',
						time: ['2022-04-02 14:07'],
						name: '科研实验室2',
						type: '实验室预约',
						status: '申请',
						typeText: 'primary'
					},
					{
						id: 2,
						title: '宋军',
						time: ['2022-04-01 10:28'],
						name: '暗访机1号',
						type: '设备预约',
						status: '已作废',
						typeText: 'danger'
					}
				]
			}
		},
		methods: {
			tabsClick(index) {
				console.log(index)
				this.tabsIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.main-box_G {
		padding: 0 18rpx;

		.bookingData {
			font-size: 24rpx;
			color: #666666;
			margin-top: 22rpx;

			.title {
				color: #999999;
			}
			
			.content {
				margin-left: 12rpx;
			}

			.status_primary {
				color: #0A7AFF;
			}

			.status_danger {
				color: #F56C6C;
			}
		}
	}
</style>
